<template>
  <div class="enterprise_manage">
    <el-form :inline="true" :model="searchForm" size="mini" style="margin-left: 10px">
      <el-form-item label="姓名">
        <el-input v-model="searchForm.name" placeholder="请输入客户姓名"></el-input>
      </el-form-item>
      <el-form-item label="联系方式">
        <el-input v-model="searchForm.phone" placeholder="请输入客户电话"></el-input>
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="searchForm.createTime"
          value-format="yyyy-MM-dd"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="getCustomerList()">查询</el-button>
        <el-button type="primary" @click="showAll()">显示全部</el-button>
      </el-form-item>
    </el-form>
    <!--表格-->
    <el-table size="mini" :data="customerList">
      <el-table-column prop="name" label="客户名"/>
      <el-table-column prop="phone" label="联系方式"/>
      <el-table-column prop="summary.creditTotal" label="积分总额"/>
      <el-table-column prop="summary.creditRemain" label="积分余额"/>
      <el-table-column prop="summary.orderQuantityDone" label="已完成订单数"/>
      <el-table-column label="操作栏">
        <template slot-scope="scope">
          <span class="t-link" @click="showCreditDetail(scope.row)">查看积分详情</span>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="paging-block" style="text-align: center">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagination.pageNum"
        :page-sizes="[15, 20, 30, 40]"
        :page-size="pagination.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pagination.total"
      ></el-pagination>
    </div>
    <el-dialog :visible.sync="showDetail" title="积分详情" width="80%">
      <div v-if="creditItemList.length===0">无积分信息</div>
      <div v-else>
        <div class="credit_summary">
          <div class="credit_total">积分总额:{{creditTotal}}</div>
          <div class="credit_remain">积分余额:{{creditRemain}}</div>
        </div>
        <div class="credit_items">
          <el-table :data="creditItemList" size="mini">
            <el-table-column label="原因" prop="desc"/>
            <el-table-column label="积分">
              <template
                slot-scope="scope"
              >{{scope.row.credit>0?`+${scope.row.credit}`:scope.row.credit}}</template>
            </el-table-column>
            <el-table-column label="日期" prop="date"/>
          </el-table>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="showDetail = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import ajax from "@/api/ajax";

export default {
  name: "customer_manage",
  data() {
    return {
      searchForm: {
        phone: "",
        name: "",
        createTime: []
      },
      customerList: [], // 客户列表
      creditItemList: [], //积分详情
      creditTotal: 0, //积分总额
      creditRemain: 0, //积分余额
      showDetail: false, // 显示积分详情
      pagination: {
        pageNum: 1,
        total: 0,
        limit: 15
      }
    };
  },
  methods: {
    showAll() {
      this.clearObj(this.searchForm);
      this.getCustomerList();
    },
    // 获取客户列表
    getCustomerList() {
      // 解析日期
      let params = {};
      let dates = this.searchForm.createTime;
      // delete this.searchForm.createTime;
      if (dates && dates.length == 2) {
        params["cStartTime"] = dates[0];
        params["cEndTime"] = dates[1];
      }
      Object.assign(params, this.searchForm, this.pagination);
      params = this.clearEmptyParams(params);
      ajax.get("/api/sys/service/customers", { params }).then(resp => {
        console.log(resp);
        this.customerList = resp.data.data.results;
        this.pagination.total = resp.data.data.total;
      });
    },
    // 查看积分详情
    showCreditDetail(customer) {
      this.showDetail = true;
      this.creditTotal = customer.summary.creditTotal;
      this.creditRemain = customer.summary.creditRemain;
      ajax.get(`/api/credit/summary/${customer.userId}`).then(resp => {
        console.log(resp);
        this.creditItemList = resp.data.data.creditItems;
      });
    },

    handleCurrentChange(currentPage) {
      this.pagination.pageNum = currentPage;
      this.getCustomerList();
    },
    handleSizeChange(size) {
      this.pagination.limit = size;
      this.getCustomerList();
    }
  },
  created() {
    this.getCustomerList();
  }
};
</script>
<style scoped lang="less">
.credit_summary {
  margin-left: 10px;
  display: flex;
  display: -webkit-flex;
  div {
    margin-right: 20px;
  }
}
</style>
